<!--

=========================================================
* Pixel Pro Bootstrap 4 UI Kit
=========================================================

* Product Page: https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit
* Copyright 2019 Themesberg (https://www.themesberg.com)

* Coded by https://themesberg.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

-->
<!DOCTYPE html>
<html lang="en">

<head>
    @@include('./_head.html', {
        "path": "../..",
        "title": "Pixel Documentation - Blog cards"
    })
</head>

<body>
    <a href="#doc-index" class="btn btn-lg btn-primary btn-block rounded-0 d-lg-none" data-toggle="collapse" data-target="#doc-index" aria-expanded="false" aria-controls="doc-index">
        <svg class="icon fill-white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 17C3 17.5523 3.44772 18 4 18H20C20.5523 18 21 17.5523 21 17V17C21 16.4477 20.5523 16 20 16H4C3.44772 16 3 16.4477 3 17V17ZM3 12C3 12.5523 3.44772 13 4 13H20C20.5523 13 21 12.5523 21 12V12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12V12ZM4 6C3.44772 6 3 6.44772 3 7V7C3 7.55228 3.44772 8 4 8H20C20.5523 8 21 7.55228 21 7V7C21 6.44772 20.5523 6 20 6H4Z" />
        </svg>
        <span class="h6 text-white">Menu</span>
    </a>
    <section class="container-fluid py-4">
        <div class="row">
            @@include('./_docs-sidebar.html', {
                "path": "../..",
                "docs-path": ".."
            })
            <!-- Content -->
            <div class="col-12 col-lg-10">
                <div class="row">
                    <div class="col-xl-10 col-lg-9 px-xl-5 px-lg-3 px-md-2 py-md-5">
                        <div class="border-bottom">
                            <h1>Blog Cards</h1>
                            <p class="lead text-dark">Documentation and examples for blog-cards. Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.</p>

                        </div>
                        <div id="example" class="my-5">
                            <h5 class="mb-3">Default blog card</h5>
                            <p>Below is an example of a basic blog-card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with bootstrap 4 various
                                <a href="#sizing">sizing
                                    options</a></p>
                            <p>Use the <code class="text-danger">.shadow</code>, <code class="text-danger">.border</code> and <code class="text-danger">.bg-*</code> modifier classes to make blog cards more creative.
                            </p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-1" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-1" data-toggle="tab" href="#tab-content-1" role="tab" aria-controls="tab-link-1" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-2" data-toggle="tab" href="#tab-content-2" role="tab" aria-controls="tab-link-2" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent1">
                                            <div class="tab-pane fade show active" id="tab-content-1" role="tabpanel" aria-labelledby="tab-content-1">
                                                <div class="col-md-8">
                                                    <!-- Blog Card -->
                                                    <div class="blog-card">
                                                        <div class="card shadow-soft border-light">
                                                            <div class="card-header">
                                                                <div class="post-meta d-block d-sm-flex justify-content-between">
                                                                    <h6 class="icon-info"><i class="fas fa-code mr-2"></i>Coding</h6><span class="small"><i class="far fa-clock mr-2"></i>Last
                                                                        updated 3 mins ago</span>
                                                                </div>
                                                            </div>
                                                            <div class="card-body pt-0">
                                                                <a href="#">
                                                                    <h3>Remote workers, here's how to dodge distractions
                                                                    </h3>
                                                                </a>
                                                                <p class="card-text my-2">According to some historical records, some people out there have boundless energy, loads of free time, and ambition...</p>
                                                            </div>
                                                            <div class="card-footer mx-4 px-0 pt-0">
                                                                <a class="btn btn-secondary" href="#">
                                                                    <span class="fas fa-book-open mr-2"></span> Learn more
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- End of Blog Card -->
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-2" role="tabpanel" aria-labelledby="tab-content-2">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Blog Card --&gt;
&lt;div class=&quot;blog-card&quot;&gt;
    &lt;div class=&quot;card shadow-soft border-light&quot;&gt;
        &lt;div class=&quot;card-header&quot;&gt;
            &lt;div class=&quot;post-meta d-block d-sm-flex justify-content-between&quot;&gt;
                &lt;h6 class=&quot;icon-info&quot;&gt;&lt;i class=&quot;fas fa-code mr-2&quot;&gt;&lt;/i&gt;Coding&lt;/h6&gt;&lt;span class=&quot;small&quot;&gt;&lt;i class=&quot;far fa-clock mr-2&quot;&gt;&lt;/i&gt;Last updated 3 mins ago&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-body pt-0&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;
                &lt;h3&gt;Remote workers, here's how to dodge
                    distractions&lt;/h3&gt;
            &lt;/a&gt;
            &lt;p class=&quot;card-text my-2&quot;&gt;According to some historical
                records, some people out there have boundless
                energy, loads of free time, and ambition...&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-footer mx-4 px-0 pt-0&quot;&gt;
            &lt;a class=&quot;btn btn-secondary&quot; href=&quot;#&quot;&gt;
                &lt;span class=&quot;fas fa-book-open mr-2&quot;&gt;&lt;/span&gt;
                Learn more
            &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Blog Card --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="image" class="my-5">
                            <h5 class="mb-3">Blog cards with images</h5>
                            <p>Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.</p>
                            <p>Similar to headers and footers, cards can include <code class="text-danger">top</code> and <code class="text-danger">bottom</code> “image caps”—images at the top or bottom of a card.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-2" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-3" data-toggle="tab" href="#tab-content-3" role="tab" aria-controls="tab-link-3" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-4" data-toggle="tab" href="#tab-content-4" role="tab" aria-controls="tab-link-4" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent2">
                                            <div class="tab-pane fade show active" id="tab-content-3" role="tabpanel" aria-labelledby="tab-content-3">
                                                <div class="row">
                                                    <div class="col col-md-6">
                                                        <!-- Blog Card -->
                                                        <div class="card shadow-soft border-light">
                                                            <div class="card-header p-0">
                                                                <img src="../../assets/img/blog/image-1.jpg" class="card-img-top" alt="image">
                                                            </div>
                                                            <div class="card-body">
                                                                <div class="post-meta d-block d-sm-flex justify-content-between">
                                                                    <h6 class="icon-secondary small"><i class="fas fa-medal mr-2"></i>Awards</h6>
                                                                    <span class="small lh-120"><i class="far fa-clock mr-2"></i>Last updated 1 day ago</span>
                                                                </div>
                                                                <a href="#">
                                                                    <h4 class="mt-3 mb-4">Remote workers, here's how to dodge</h4>
                                                                </a>
                                                                <p class="card-text my-2">According to some historical records, some people out there have boundless energy, loads of free time, and ambition...</p>
                                                            </div>
                                                            <div class="card-footer mx-4 px-0 pt-0">
                                                                <a class="btn btn-primary animate-up-2" href="#">
                                                                    <span class="fas fa-book-open mr-2"></span> Learn more
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <!-- End of Blog Card -->
                                                    </div>
                                                    <div class="col col-md-6">
                                                        <!-- Blog Card -->
                                                        <div class="card shadow-soft border-light">
                                                            <div class="card-body">
                                                                <div class="post-meta d-block d-sm-flex justify-content-between">
                                                                    <h6 class="icon-secondary small"><i class="fas fa-medal mr-2"></i>Awards</h6>
                                                                    <span class="small lh-120"><i class="far fa-clock mr-2"></i>Last updated 1 day ago</span>
                                                                </div>
                                                                <a href="#">
                                                                    <h4 class="mt-3 mb-4">Remote workers, here's how to dodge</h4>
                                                                </a>
                                                                <p class="card-text my-2">According to some historical records, some people out there have boundless energy, loads of free time, and ambition...</p>
                                                            </div>
                                                            <div class="card-footer mx-4 px-0 pt-0">
                                                                <a class="btn btn-primary animate-up-2" href="#">
                                                                    <span class="fas fa-book-open mr-2"></span> Learn more
                                                                </a>
                                                            </div>
                                                            <img src="../../assets/img/blog/image-1.jpg" class="card-img-bottom" alt="image">
                                                        </div>
                                                        <!-- End of Blog Card -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-4" role="tabpanel" aria-labelledby="tab-content-4">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Blog Card --&gt;
&lt;div class=&quot;blog-card&quot;&gt;
    &lt;div class=&quot;card shadow-soft border-light&quot;&gt;
        &lt;img src=&quot;../../assets/img/blog/image-3.jpg&quot; class=&quot;card-img-top&quot;
            alt=&quot;image&quot;&gt;
        &lt;div class=&quot;card-header&quot;&gt;
            &lt;div class=&quot;post-meta d-block d-sm-flex justify-content-between&quot;&gt;
                &lt;h6 class=&quot;icon-secondary small&quot;&gt;&lt;i class=&quot;fas fa-medal mr-2&quot;&gt;&lt;/i&gt;Awards&lt;/h6&gt;&lt;span class=&quot;small lh-120&quot;&gt;&lt;i class=&quot;far fa-clock mr-2&quot;&gt;&lt;/i&gt;Last updated 1 day ago&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-body pt-0&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;
                &lt;h4&gt;Eight tips for improving contact form
                    conversions&lt;/h4&gt;
            &lt;/a&gt;
            &lt;p class=&quot;card-text my-2&quot;&gt;According to some
                historical records, some people out there have
                boundless energy, loads of free time, and
                ambition...&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Blog Card --&gt;
&lt;!-- Blog Card --&gt;
&lt;div class=&quot;blog-card&quot;&gt;
    &lt;div class=&quot;card shadow border-light&quot;&gt;
        &lt;div class=&quot;card-header&quot;&gt;
            &lt;div class=&quot;post-meta d-block d-sm-flex justify-content-between&quot;&gt;
                &lt;h6 class=&quot;icon-secondary small&quot;&gt;&lt;i class=&quot;fas fa-medal mr-2&quot;&gt;&lt;/i&gt;Awards&lt;/h6&gt;&lt;span class=&quot;small lh-120&quot;&gt;&lt;i class=&quot;far fa-clock mr-2&quot;&gt;&lt;/i&gt;Last updated 1 day ago&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-body pt-0&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;
                &lt;h4&gt;Remote workers, here's how to dodge
                    distractions&lt;/h4&gt;
            &lt;/a&gt;
            &lt;p class=&quot;card-text my-2&quot;&gt;According to some
                historical records, some people out there have
                boundless energy, loads of free time, and
                ambition...&lt;/p&gt;
        &lt;/div&gt;
        &lt;img src=&quot;../../assets/img/blog/image-3.jpg&quot; class=&quot;card-img-bottom&quot;
            alt=&quot;image&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Blog Card --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="minimal" class="my-5">
                            <h5 class="mb-3">Minimal Blog Card</h5>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-3" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-5" data-toggle="tab" href="#tab-content-5" role="tab" aria-controls="tab-link-5" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-6" data-toggle="tab" href="#tab-content-6" role="tab" aria-controls="tab-link-6" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent3">
                                            <div class="tab-pane fade show active" id="tab-content-5" role="tabpanel" aria-labelledby="tab-content-5">
                                                <div class="col-md-6 col-lg-6">
                                                    <!-- Blog Card -->
                                                    <div class="blog-card text-center">
                                                        <div class="card shadow-soft border-light">
                                                            <div class="card-header mx-4 px-0">
                                                                <div class="align-items-center">
                                                                    <div class="avatar-sm-custom mr-2">
                                                                        <img class="mb-2 organic-radius border-primary" src="../../assets/img/team/8.jpg" alt="Image Description">
                                                                    </div>
                                                                    <h6 class="small text-gray">by<a class="text-gray font-weight-bold ml-1" href="#">Tanislav Robert</a></h6>
                                                                </div>
                                                            </div>
                                                            <div class="card-body">
                                                                <a href="#">
                                                                    <h5>Celebrate Themesberg’s 8th birthday with a donation, giveaway and discount!</h5>
                                                                </a>
                                                            </div>
                                                            <div class="card-footer mx-4 px-0">
                                                                <div class="post-meta small"><a href="#" class="mr-3"><i
                                                                            class="far fa-comments mr-2"></i>21</a><span><i
                                                                            class="far fa-clock mr-2"></i>Jan 03, 2019</span></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- End of Blog Card -->
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-6" role="tabpanel" aria-labelledby="tab-content-6">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Blog Card --&gt;
&lt;div class=&quot;blog-card text-center&quot;&gt;
    &lt;div class=&quot;card shadow-soft border-light&quot;&gt;
        &lt;div class=&quot;card-header mx-4 px-0&quot;&gt;
            &lt;div class=&quot;align-items-center&quot;&gt;
                &lt;div class=&quot;avatar-sm-custom mr-2&quot;&gt;
                    &lt;img class=&quot;mb-2 organic-radius border-primary&quot;
                        src=&quot;../../assets/img/team/8.jpg&quot; alt=&quot;Image Description&quot;&gt;
                &lt;/div&gt;
                &lt;h6 class=&quot;small text-gray&quot;&gt;by&lt;a class=&quot;text-gray font-weight-bold ml-1&quot;
                        href=&quot;#&quot;&gt;Tanislav Robert&lt;/a&gt;&lt;/h6&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-body&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;
                &lt;h5&gt;Celebrate Themesberg&rsquo;s 8th birthday with a
                    donation, giveaway and discount!&lt;/h5&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-footer mx-4 px-0&quot;&gt;
            &lt;div class=&quot;post-meta small&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;mr-3&quot;&gt;&lt;i class=&quot;far fa-comments mr-2&quot;&gt;&lt;/i&gt;21&lt;/a&gt;&lt;span&gt;&lt;i class=&quot;far fa-clock mr-2&quot;&gt;&lt;/i&gt;Jan 03, 2019&lt;/span&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Blog Card --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="background" class="my-5">
                            <h5 class="mb-3">Full Background Blog Cards</h5>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-4" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-7" data-toggle="tab" href="#tab-content-7" role="tab" aria-controls="tab-link-7" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-8" data-toggle="tab" href="#tab-content-8" role="tab" aria-controls="tab-link-8" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent4">
                                            <div class="tab-pane fade show active" id="tab-content-7" role="tabpanel" aria-labelledby="tab-content-7">
                                                <div class="row">
                                                    <div class="col-lg-3 col-md-6">
                                                        <!-- Blog Card -->
                                                        <div class="blog-card">
                                                            <div class="card img-card overlay-dark fh-500 border-0" data-background="../../assets/img/blog/image-6.jpg">
                                                                <div class="card-img-overlay">
                                                                    <div class="card-body text-white p-3">
                                                                        <div class="bottom-content">
                                                                            <div class="post-meta mb-3">
                                                                                <a href="#"><i class="far fa-comments mr-2"></i>33</a>
                                                                                <span><i class="far fa-clock mr-2"></i>Jan
                                                                                    03, 2019</span>
                                                                            </div>
                                                                            <a href="#">
                                                                                <h5>Everything you need to know about Bootstrap 4</h5>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End of Blog Card -->
                                                    </div>
                                                    <div class="col-lg-6 col-md-6">
                                                        <!-- Blog Card -->
                                                        <div class="blog-card">
                                                            <div class="card img-card overlay-dark fh-500 border-0" data-background="../../assets/img/blog/image-6.jpg">
                                                                <div class="card-img-overlay d-flex align-items-center">
                                                                    <div class="card-body text-white">
                                                                        <div class="post-meta mb-3">
                                                                            <a href="#"><i class="far fa-comments mr-2"></i>33</a>
                                                                            <span><i class="far fa-clock mr-2"></i>Jan
                                                                                03,
                                                                                2019</span>
                                                                        </div>
                                                                        <a href="#">
                                                                            <h3>Remote workers, here's how to dodge distractions
                                                                            </h3>
                                                                        </a>
                                                                        <p class="card-text lead my-4">Regardless of what your ultimate career goal is—to actively build websites for clients or to turn your business into a thriving digital agency—there are ways in which you can work
                                                                            less and accomplish more in ...</p>
                                                                        <a class="btn btn-secondary" href="#">
                                                                            <span class="fas fa-book-open mr-2"></span> Learn more
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End of Blog Card -->
                                                    </div>
                                                    <div class="col-lg-3 col-md-6">
                                                        <!-- Blog Card -->
                                                        <div class="blog-card">
                                                            <div class="card img-card overlay-dark fh-500 border-0" data-background="../../assets/img/blog/image-6.jpg">
                                                                <div class="card-img-overlay">
                                                                    <div class="card-body text-white p-3">
                                                                        <div class="post-meta mb-3 text-white">
                                                                            <a href="#"><i class="far fa-comments mr-2"></i>33</a>
                                                                            <span><i class="far fa-clock mr-2"></i>Jan
                                                                                03,
                                                                                2019</span>
                                                                        </div>
                                                                        <a href="#">
                                                                            <h5>Everything you need to know about Bootstrap 4</h5>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End of Blog Card -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-8" role="tabpanel" aria-labelledby="tab-content-8">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-3 col-md-6&quot;&gt;
    &lt;!-- Blog Card --&gt;
    &lt;div class=&quot;blog-card&quot;&gt;
        &lt;div class=&quot;card img-card overlay-dark fh-500 border-0&quot; data-background=&quot;../../assets/img/blog/image-6.jpg&quot;&gt;
            &lt;div class=&quot;card-img-overlay&quot;&gt;
                &lt;div class=&quot;card-body text-white p-3&quot;&gt;  
                    &lt;div class=&quot;bottom-content&quot;&gt;
                        &lt;div class=&quot;post-meta mb-3&quot;&gt;
                            &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;far fa-comments&quot;&gt;&lt;/i&gt;33&lt;/a&gt;
                            &lt;span&gt;&lt;i class=&quot;far fa-clock&quot;&gt;&lt;/i&gt;Jan 03, 2019&lt;/span&gt;
                        &lt;/div&gt;  
                        &lt;a href=&quot;#&quot;&gt;&lt;h5&gt;Everything you need to know about Bootstrap 4&lt;/h5&gt;&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- End of Blog Card --&gt;
&lt;/div&gt;
&lt;div class=&quot;col-lg-6 col-md-6&quot;&gt;
    &lt;!-- Blog Card --&gt;
    &lt;div class=&quot;blog-card&quot;&gt;
        &lt;div class=&quot;card img-card overlay-dark fh-500 border-0&quot; data-background=&quot;../../assets/img/blog/image-6.jpg&quot;&gt;
            &lt;div class=&quot;card-img-overlay d-flex align-items-center&quot;&gt;
                &lt;div class=&quot;card-body text-white&quot;&gt;  
                    &lt;div class=&quot;post-meta mb-3&quot;&gt;
                        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;far fa-comments&quot;&gt;&lt;/i&gt;33&lt;/a&gt;
                        &lt;span&gt;&lt;i class=&quot;far fa-clock&quot;&gt;&lt;/i&gt;Jan 03, 2019&lt;/span&gt;
                    &lt;/div&gt;  
                    &lt;a href=&quot;#&quot;&gt;&lt;h3&gt;Remote workers, here's how to dodge distractions&lt;/h3&gt;&lt;/a&gt;
                    &lt;p class=&quot;card-text lead my-4&quot;&gt;Regardless of what your ultimate career goal is&mdash;to actively build websites for clients or to turn your business into a thriving digital agency&mdash;there are ways in which you can work less and accomplish more in ...&lt;/p&gt;                                       
                    &lt;a class=&quot;btn btn-secondary&quot; href=&quot;#&quot;&gt;
                        &lt;span class=&quot;fas fa-book-open mr-2&quot;&gt;&lt;/span&gt;
                        Learn more
                    &lt;/a&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- End of Blog Card --&gt;
&lt;/div&gt;
&lt;div class=&quot;col-lg-3 col-md-6&quot;&gt;
    &lt;!-- Blog Card --&gt;
    &lt;div class=&quot;blog-card&quot;&gt;
        &lt;div class=&quot;card img-card overlay-dark fh-500 border-0&quot; data-background=&quot;../../assets/img/blog/image-6.jpg&quot;&gt;
            &lt;div class=&quot;card-img-overlay&quot;&gt;
                &lt;div class=&quot;card-body text-white p-3&quot;&gt;  
                    &lt;div class=&quot;post-meta mb-3 text-white&quot;&gt;
                        &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;far fa-comments&quot;&gt;&lt;/i&gt;33&lt;/a&gt;
                        &lt;span&gt;&lt;i class=&quot;far fa-clock&quot;&gt;&lt;/i&gt;Jan 03, 2019&lt;/span&gt;
                    &lt;/div&gt;  
                    &lt;a href=&quot;#&quot;&gt;&lt;h5&gt;Everything you need to know about Bootstrap 4&lt;/h5&gt;&lt;/a&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- End of Blog Card --&gt;
&lt;/div&gt;
&lt;/div&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="fluid" class="my-5">
                            <h5 class="mb-3">Fluid Wide Blog Card</h5>
                            <p>Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with <code class="text-danger">.no-gutters</code> and use
                                <code class="text-danger">.col-md-*</code> classes to make the card horizontal at the <code class="text-danger">md</code> breakpoint. Further adjustments may be needed depending on your card content.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-5" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-9" data-toggle="tab" href="#tab-content-9" role="tab" aria-controls="tab-link-9" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-10" data-toggle="tab" href="#tab-content-10" role="tab" aria-controls="tab-link-10" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent5">
                                            <div class="tab-pane fade show active" id="tab-content-9" role="tabpanel" aria-labelledby="tab-content-9">
                                                <div class="col-md-12">
                                                    <!-- Blog Card -->
                                                    <div class="blog-card">
                                                        <div class="row">
                                                            <div class="col-lg-12">
                                                                <div class="card card-article-wide shadow-soft flex-md-row no-gutters border-light">
                                                                    <a href="#" class="col-md-6 col-lg-6">
                                                                        <img src="../../assets/img/blog/image-4.jpg" alt="image" class="card-img-top">
                                                                    </a>
                                                                    <div class="card-body d-flex flex-column justify-content-between  col-auto p-4">
                                                                        <div class="d-flex justify-content-between">
                                                                            <div class="d-flex">
                                                                                <div class="mr-2">
                                                                                    <h6 class="icon-danger"><i class="mr-2 fas fa-fire-alt"></i>Trending</h6>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <a href="#">
                                                                            <h3>Remote workers, here's how to dodge distractions
                                                                            </h3>
                                                                        </a>
                                                                        <p class="lead">Regardless of what your ultimate career goal is—to actively build websites ...</p>
                                                                        <p>
                                                                            <a href="#" class="btn btn-link text-dark btn-icon">
                                                                                <span class="btn-inner-icon"><i class="fas fa-link"></i></span>
                                                                                <span class="btn-inner-text font-weight-bold">Read
                                                                                    More</span>
                                                                            </a>
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- End of Blog Card -->
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-10" role="tabpanel" aria-labelledby="tab-content-10">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Blog Card --&gt;
&lt;div class=&quot;blog-card&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-lg-12&quot;&gt;
            &lt;div class=&quot;card card-article-wide shadow-soft flex-md-row no-gutters border-light&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;col-md-6 col-lg-6&quot;&gt;
                    &lt;img src=&quot;../../assets/img/blog/image-4.jpg&quot; alt=&quot;image&quot; class=&quot;card-img-top&quot;&gt;
                &lt;/a&gt;
                &lt;div class=&quot;card-body d-flex flex-column justify-content-between  col-auto p-4&quot;&gt;
                    &lt;div class=&quot;d-flex justify-content-between&quot;&gt;
                        &lt;div class=&quot;d-flex&quot;&gt;
                            &lt;div class=&quot;mr-2&quot;&gt;
                                &lt;h6 class=&quot;icon-danger&quot;&gt;&lt;i class=&quot;mr-2 fas fa-fire-alt&quot;&gt;&lt;/i&gt;Trending&lt;/h6&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;a href=&quot;#&quot;&gt;&lt;h3&gt;Remote workers, here's how to dodge distractions&lt;/h3&gt;&lt;/a&gt;
                    &lt;p class=&quot;lead&quot;&gt;Regardless of what your ultimate career goal is&mdash;to actively build websites ...&lt;/p&gt;
                    &lt;p&gt;
                        &lt;a href=&quot;#&quot; class=&quot;btn btn-link text-dark btn-icon&quot;&gt;
                            &lt;span class=&quot;btn-inner-icon&quot;&gt;&lt;i class=&quot;fas fa-link&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                            &lt;span class=&quot;btn-inner-text font-weight-bold&quot;&gt;Learn more&lt;/span&gt;
                        &lt;/a&gt;
                    &lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Blog Card --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="small-fluid" class="my-5">
                            <h5 class="mb-3">Small Wide Blog Card</h5>
                            <p>Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with <code class="text-danger">.no-gutters</code> and use
                                <code class="text-danger">.col-md-*</code> classes to make the card horizontal at the <code class="text-danger">md</code> breakpoint. Further adjustments may be needed depending on your card content.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-6" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-11" data-toggle="tab" href="#tab-content-11" role="tab" aria-controls="tab-link-11" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-12" data-toggle="tab" href="#tab-content-12" role="tab" aria-controls="tab-link-12" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent6">
                                            <div class="tab-pane fade show active" id="tab-content-11" role="tabpanel" aria-labelledby="tab-content-11">
                                                <div class="col-lg-7 col-md-12">
                                                    <!-- Blog Card -->
                                                    <div class="blog-card">
                                                        <div class="row">
                                                            <div class="col-lg-12">
                                                                <div class="card card-article-wide flex-md-row no-gutters shadow-soft border-light">
                                                                    <a href="#" class="col-md-4">
                                                                        <img src="../../assets/img/blog/image-2.jpg" alt="image" class="card-img-top">
                                                                    </a>
                                                                    <div class="card-body d-flex flex-column col-auto px-4 py-4 py-md-5">
                                                                        <div class="d-flex justify-content-between">
                                                                            <div class="mr-2">
                                                                                <h6 class="icon-secondary mb-0 small"><i class="mr-2 fas fa-medal"></i>Awards</h6>
                                                                            </div>
                                                                            <div class="post-meta lh-100">
                                                                                <a href="#" class="mr-3 small"><i class="far fa-comments mr-1"></i>33</a>
                                                                                <span class="small"><i class="far fa-clock mr-2"></i>Jan 03,
                                                                                    2019
                                                                                </span>
                                                                            </div>
                                                                        </div>
                                                                        <div class="my-4">
                                                                            <a href="#">
                                                                                <h4>Remote workers, here's how to dodge distractions</h4>
                                                                            </a>
                                                                            <p class="mb-0">According to some historical records, some people out there have boundless energy, loads of free time, and ambition...</p>
                                                                        </div>
                                                                        <div class="d-flex">
                                                                            <div class="media">
                                                                                <div class="avatar-sm mr-1">
                                                                                    <img class="img-fluid rounded-circle" src="../../assets/img/team/8.jpg" alt="avatar">
                                                                                </div>
                                                                                <div class="avatar-name">
                                                                                    <a class="text-gray small" href="#">Tanislav Robert</a>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- End of Blog Card -->
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-12" role="tabpanel" aria-labelledby="tab-content-12">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Blog Card --&gt;
&lt;div class=&quot;blog-card&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-lg-12&quot;&gt;
            &lt;div class=&quot;card card-article-wide flex-md-row no-gutters shadow-soft border-light&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;col-md-4&quot;&gt;
                    &lt;img src=&quot;../../assets/img/blog/image-2.jpg&quot; alt=&quot;image&quot; class=&quot;card-img-top&quot;&gt;
                &lt;/a&gt;
                &lt;div class=&quot;card-body d-flex flex-column col-auto px-4 py-4 py-md-5&quot;&gt;
                    &lt;div class=&quot;d-flex justify-content-between&quot;&gt;
                        &lt;div class=&quot;mr-2&quot;&gt;
                            &lt;h6 class=&quot;icon-secondary mb-0 small&quot;&gt;&lt;i class=&quot;mr-2 fas fa-medal&quot;&gt;&lt;/i&gt;Awards&lt;/h6&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;post-meta lh-100&quot;&gt;
                            &lt;a href=&quot;#&quot; class=&quot;mr-3 small&quot;&gt;&lt;i class=&quot;far fa-comments mr-1&quot;&gt;&lt;/i&gt;33&lt;/a&gt;
                            &lt;span class=&quot;small&quot;&gt;&lt;i class=&quot;far fa-clock mr-2&quot;&gt;&lt;/i&gt;Jan 03,
                                2019
                            &lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;my-4&quot;&gt;
                        &lt;a href=&quot;#&quot;&gt;
                            &lt;h4&gt;Remote workers, here's how to dodge distractions&lt;/h4&gt;
                        &lt;/a&gt;
                        &lt;p class=&quot;mb-0&quot;&gt;According to some historical records, some people out there have boundless energy, loads of free time, and ambition...&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;d-flex&quot;&gt;
                        &lt;div class=&quot;media&quot;&gt;
                            &lt;div class=&quot;avatar-sm mr-1&quot;&gt;
                                &lt;img class=&quot;img-fluid rounded-circle&quot; src=&quot;../../assets/img/team/8.jpg&quot; alt=&quot;avatar&quot;&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;avatar-name&quot;&gt;
                                &lt;a class=&quot;text-gray small&quot; href=&quot;#&quot;&gt;Tanislav Robert&lt;/a&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Blog Card --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="carousel" class="my-5">
                            <h5 class="mb-3">Blog Card with Carousel</h5>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-7" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-13" data-toggle="tab" href="#tab-content-13" role="tab" aria-controls="tab-link-13" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-14" data-toggle="tab" href="#tab-content-14" role="tab" aria-controls="tab-link-14" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent7">
                                            <div class="tab-pane fade show active" id="tab-content-13" role="tabpanel" aria-labelledby="tab-content-13">
                                                <div class="col-md-6">
                                                    <!-- Blog Card -->
                                                    <div class="blog-card">
                                                        <div class="card shadow-soft border-light">
                                                            <div id="Carousel2" class="carousel slide" data-ride="carousel">
                                                                <div class="carousel-inner">
                                                                    <div class="carousel-item active">
                                                                        <img class="d-block w-100" src="../../assets/img/blog/image-2.jpg" alt="First slide">
                                                                    </div>
                                                                    <div class="carousel-item">
                                                                        <img class="d-block w-100" src="../../assets/img/blog/image-3.jpg" alt="Second slide">
                                                                    </div>
                                                                    <div class="carousel-item">
                                                                        <img class="d-block w-100" src="../../assets/img/blog/image-1.jpg" alt="Third slide">
                                                                    </div>
                                                                </div>
                                                                <a class="carousel-control-prev" href="#Carousel2" role="button" data-slide="prev">
                                                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                                    <span class="sr-only">Previous</span>
                                                                </a>
                                                                <a class="carousel-control-next" href="#Carousel2" role="button" data-slide="next">
                                                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                                    <span class="sr-only">Next</span>
                                                                </a>
                                                            </div>
                                                            <div class="card-header">
                                                                <div class="post-meta d-block d-sm-flex justify-content-between">
                                                                    <h6 class="icon-secondary"><i class="fas fa-code mr-2"></i>Coding</h6><span class="small"><i class="far fa-clock mr-2"></i>Last
                                                                        updated 3 mins ago</span>
                                                                </div>
                                                            </div>
                                                            <div class="card-body pt-0">
                                                                <a href="#">
                                                                    <h4>Remote workers, here's how to dodge distractions
                                                                    </h4>
                                                                </a>
                                                                <p class="card-text my-2">According to some historical records, some people out there have boundless energy, loads of free time, and ambition...</p>
                                                            </div>
                                                            <div class="card-footer mx-4 px-0 pt-0">
                                                                <a class="btn btn-secondary" href="#">
                                                                    <span class="fas fa-book-open mr-2"></span> Learn more
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- End of Blog Card -->
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-14" role="tabpanel" aria-labelledby="tab-content-14">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Blog Card --&gt;
&lt;div class=&quot;blog-card&quot;&gt;
    &lt;div class=&quot;card shadow-soft border-light&quot;&gt;
        &lt;div id=&quot;Carousel2&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
            &lt;div class=&quot;carousel-inner&quot;&gt;
                &lt;div class=&quot;carousel-item active&quot;&gt;
                    &lt;img class=&quot;d-block w-100&quot; src=&quot;../../assets/img/blog/image-2.jpg&quot;
                        alt=&quot;First slide&quot;&gt;
                &lt;/div&gt;
                &lt;div class=&quot;carousel-item&quot;&gt;
                    &lt;img class=&quot;d-block w-100&quot; src=&quot;../../assets/img/blog/image-3.jpg&quot;
                        alt=&quot;Second slide&quot;&gt;
                &lt;/div&gt;
                &lt;div class=&quot;carousel-item&quot;&gt;
                    &lt;img class=&quot;d-block w-100&quot; src=&quot;../../assets/img/blog/image-1.jpg&quot;
                        alt=&quot;Third slide&quot;&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#Carousel2&quot; role=&quot;button&quot;
                data-slide=&quot;prev&quot;&gt;
                &lt;span class=&quot;carousel-control-prev-icon&quot;
                    aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
            &lt;/a&gt;
            &lt;a class=&quot;carousel-control-next&quot; href=&quot;#Carousel2&quot; role=&quot;button&quot;
                data-slide=&quot;next&quot;&gt;
                &lt;span class=&quot;carousel-control-next-icon&quot;
                    aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-header&quot;&gt;
            &lt;div class=&quot;post-meta d-block d-sm-flex justify-content-between&quot;&gt;
                &lt;h6 class=&quot;icon-secondary&quot;&gt;&lt;i class=&quot;fas fa-code mr-2&quot;&gt;&lt;/i&gt;Coding&lt;/h6&gt;&lt;span class=&quot;small&quot;&gt;&lt;i class=&quot;far fa-clock mr-2&quot;&gt;&lt;/i&gt;Last updated 3 mins ago&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-body pt-0&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;
                &lt;h4&gt;Remote workers, here's how to dodge
                    distractions&lt;/h4&gt;
            &lt;/a&gt;
            &lt;p class=&quot;card-text my-2&quot;&gt;According to some historical
                records, some people out there have boundless
                energy, loads of free time, and ambition...&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-footer mx-4 px-0 pt-0&quot;&gt;
            &lt;a class=&quot;btn btn-secondary&quot; href=&quot;#&quot;&gt;
                &lt;span class=&quot;fas fa-book-open mr-2&quot;&gt;&lt;/span&gt;
                Learn more
            &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Blog Card --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="colored" class="my-5">
                            <h5 class="mb-3">Background and Color</h5>
                            <p>Use <a href="https://getbootstrap.com/docs/4.3/utilities/colors/">text and background
                                    utilities</a> to change the appearance of a card.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-8" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-15" data-toggle="tab" href="#tab-content-15" role="tab" aria-controls="tab-link-15" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-16" data-toggle="tab" href="#tab-content-16" role="tab" aria-controls="tab-link-16" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent8">
                                            <div class="tab-pane fade show active" id="tab-content-15" role="tabpanel" aria-labelledby="tab-content-15">
                                                <div class="row">
                                                    <div class="col-md-6 col-lg-6">
                                                        <!-- Blog Card -->
                                                        <div class="blog-card">
                                                            <div class="card shadow-sm border-0 bg-secondary text-white">
                                                                <img src="../../assets/img/blog/image-1.jpg" class="card-img-top" alt="image">
                                                                <div class="card-body pb-0">
                                                                    <h6 class="small"><i class="mr-2 fas fa-fire-alt"></i>Design</h6>
                                                                    <a href="#">
                                                                        <h4 class="my-3">Remote workers, here's how to dodge distractions
                                                                        </h4>
                                                                    </a>
                                                                    <p class="card-text">According to some historical records, some people out there have boundless energy, loads of free time, and ambition...
                                                                    </p>
                                                                </div>
                                                                <div class="card-footer border-0 mx-4 px-0 py-4">
                                                                    <a class="btn btn-white text-secondary animate-up-2" href="#">
                                                                        <span class="fas fa-book-open mr-2"></span> Learn more
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End of Blog Card -->
                                                    </div>
                                                    <div class="col-md-6 col-lg-6">
                                                        <!-- Blog Card -->
                                                        <div class="blog-card">
                                                            <div class="card shadow-sm border-0 bg-primary text-white">
                                                                <img src="../../assets/img/blog/image-2.jpg" class="card-img-top" alt="image">
                                                                <div class="card-body pb-0">
                                                                    <h6 class="small"><i class="mr-2 fas fa-briefcase"></i>Business</h6>
                                                                    <a href="#">
                                                                        <h4 class="my-3">Eight tips for improving contact form conversions
                                                                        </h4>
                                                                    </a>
                                                                    <p class="card-text mb-0">According to some historical records, some people out there have boundless energy, loads of free time, and ambition...
                                                                    </p>
                                                                </div>
                                                                <div class="card-footer border-0 mx-4 px-0 py-4">
                                                                    <a class="btn btn-white text-primary animate-up-2" href="#">
                                                                        <span class="fas fa-book-open mr-2"></span> Learn more
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End of Blog Card -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-16" role="tabpanel" aria-labelledby="tab-content-16">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">

&lt;!-- Blog Card --&gt;
&lt;div class=&quot;blog-card&quot;&gt;
    &lt;div class=&quot;card shadow-sm border-0 bg-secondary text-white&quot;&gt;
        &lt;img src=&quot;../../assets/img/blog/image-1.jpg&quot; class=&quot;card-img-top&quot; alt=&quot;image&quot;&gt;
        &lt;div class=&quot;card-body&quot;&gt;
            &lt;h6 class=&quot;small&quot;&gt;&lt;i class=&quot;mr-2 fas fa-fire-alt&quot;&gt;&lt;/i&gt;Design&lt;/h6&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;h4&gt;Remote workers, here's how to dodge distractions&lt;/h4&gt;&lt;/a&gt;
            &lt;p class=&quot;card-text my-2&quot;&gt;According to some historical records, some people out there have boundless energy, loads of free time, and ambition...&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-footer border-0 mx-4 px-0 pt-0&quot;&gt;
            &lt;a class=&quot;btn btn-outline-white&quot; href=&quot;#&quot;&gt;
                &lt;span class=&quot;fas fa-book-open mr-2&quot;&gt;&lt;/span&gt;
                Learn more
            &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Blog Card --&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-6 col-lg-6&quot;&gt;
&lt;!-- Blog Card --&gt;
&lt;div class=&quot;blog-card&quot;&gt;
    &lt;div class=&quot;card shadow-sm border-0 bg-primary text-white&quot;&gt;
        &lt;img src=&quot;../../assets/img/blog/image-2.jpg&quot; class=&quot;card-img-top&quot; alt=&quot;image&quot;&gt;
        &lt;div class=&quot;card-body&quot;&gt;
            &lt;h6 class=&quot;small&quot;&gt;&lt;i class=&quot;mr-2 fas fa-briefcase&quot;&gt;&lt;/i&gt;Business&lt;/h6&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;h4&gt;Eight tips for improving contact form conversions&lt;/h4&gt;&lt;/a&gt;
            &lt;p class=&quot;card-text my-2&quot;&gt;According to some historical records, some people out there have boundless energy, loads of free time, and ambition...&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-footer border-0 mx-4 px-0 pt-0&quot;&gt;
            &lt;a class=&quot;btn btn-outline-white&quot; href=&quot;#&quot;&gt;
                &lt;span class=&quot;fas fa-book-open mr-2&quot;&gt;&lt;/span&gt;
                Learn more
            &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Blog Card --&gt;

                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="border" class="my-5">
                            <h5 class="mb-3">Border</h5>
                            <p>Use <a href="https://getbootstrap.com/docs/4.3/utilities/borders/">border utilities</a> to change just the <code class="text-danger">border-color</code> of a card. Note that you can put <code class="text-danger">.text-{color}</code>                                classes on the parent <code class="text-danger">.card</code> or a subset of the card’s contents as shown below.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-9" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-17" data-toggle="tab" href="#tab-content-17" role="tab" aria-controls="tab-link-17" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-18" data-toggle="tab" href="#tab-content-18" role="tab" aria-controls="tab-link-18" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent9">
                                            <div class="tab-pane fade show active" id="tab-content-17" role="tabpanel" aria-labelledby="tab-content-17">
                                                <div class="row">
                                                    <div class="col-md-6 col-lg-6">
                                                        <!-- Blog Card -->
                                                        <div class="blog-card">
                                                            <div class="card shadow-sm border-primary text-primary">
                                                                <div class="card-body">
                                                                    <span class="small"><i class="mr-2 fas fa-fire-alt"></i>Design</span>
                                                                    <a href="#">
                                                                        <h4 class="mt-3 text-primary">Remote workers, here's how to dodge distractions</h4>
                                                                    </a>
                                                                    <p class="card-text my-2">According to some historical records, some people out there have boundless energy, loads of free time, and ambition...
                                                                    </p>
                                                                </div>
                                                                <div class="card-footer border-0 mx-4 px-0 pt-0">
                                                                    <a class="btn btn-sm btn-primary animate-up-2" href="#">
                                                                        <span class="fas fa-book-open mr-2"></span> Learn more
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End of Blog Card -->
                                                    </div>
                                                    <div class="col-md-6 col-lg-6">
                                                        <!-- Blog Card -->
                                                        <div class="blog-card">
                                                            <div class="card shadow-sm border-secondary text-secondary">
                                                                <div class="card-body">
                                                                    <span class="small mb-3"><i class="mr-2 fas fa-fire-alt"></i>Design</span>
                                                                    <a href="#">
                                                                        <h4 class="mt-3 text-secondary">Remote workers, here's how to dodge distractions</h4>
                                                                    </a>
                                                                    <p class="card-text my-2">According to some historical records, some people out there have boundless energy, loads of free time, and ambition...
                                                                    </p>
                                                                </div>
                                                                <div class="card-footer border-0 mx-4 px-0 pt-0">
                                                                    <a class="btn btn-sm btn-secondary animate-up-2" href="#">
                                                                        <span class="fas fa-book-open mr-2"></span> Learn more
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End of Blog Card -->
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-18" role="tabpanel" aria-labelledby="tab-content-18">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;!-- Blog Card --&gt;
&lt;div class=&quot;blog-card&quot;&gt;
    &lt;div class=&quot;card shadow-sm border-primary text-primary&quot;&gt;
        &lt;div class=&quot;card-body&quot;&gt;
            &lt;span class=&quot;small&quot;&gt;&lt;i class=&quot;mr-2 fas fa-fire-alt&quot;&gt;&lt;/i&gt;Design&lt;/span&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;h4 class=&quot;mt-3 text-primary&quot;&gt;Remote workers, here's how to dodge distractions&lt;/h4&gt;&lt;/a&gt;
            &lt;p class=&quot;card-text my-2&quot;&gt;According to some historical records, some people out there have boundless energy, loads of free time, and ambition...&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-footer border-0 mx-4 px-0 pt-0&quot;&gt;
            &lt;a class=&quot;btn btn-sm btn-primary animate-up-2&quot; href=&quot;#&quot;&gt;
                &lt;span class=&quot;fas fa-book-open mr-2&quot;&gt;&lt;/span&gt;
                Learn more
            &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Blog Card --&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-6 col-lg-6&quot;&gt;
&lt;!-- Blog Card --&gt;
&lt;div class=&quot;blog-card&quot;&gt;
    &lt;div class=&quot;card shadow-sm border-secondary text-secondary&quot;&gt;
        &lt;div class=&quot;card-body&quot;&gt;
            &lt;span class=&quot;small mb-3&quot;&gt;&lt;i class=&quot;mr-2 fas fa-fire-alt&quot;&gt;&lt;/i&gt;Design&lt;/span&gt;
            &lt;a href=&quot;#&quot;&gt;&lt;h4 class=&quot;mt-3 text-primary&quot;&gt;Remote workers, here's how to dodge distractions&lt;/h4&gt;&lt;/a&gt;
            &lt;p class=&quot;card-text my-2&quot;&gt;According to some historical records, some people out there have boundless energy, loads of free time, and ambition...&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-footer border-0 mx-4 px-0 pt-0&quot;&gt;
            &lt;a class=&quot;btn btn-sm btn-secondary animate-up-2&quot; href=&quot;#&quot;&gt;
                &lt;span class=&quot;fas fa-book-open mr-2&quot;&gt;&lt;/span&gt;
                Learn more
            &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- End of Blog Card --&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 d-none d-lg-block py-md-1 doc-sidebar border-left">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a href="#example" class="nav-link" data-smooth-scroll>Example</a>
                            </li>
                            <li class="nav-item">
                                <a href="#image" class="nav-link " data-smooth-scroll>With image</a>
                            </li>
                            <li class="nav-item">
                                <a href="#background" class="nav-link " data-smooth-scroll>Background</a>
                            </li>
                            <li class="nav-item">
                                <a href="#fluid" class="nav-link " data-smooth-scroll>Fluid</a>
                            </li>
                            <li class="nav-item">
                                <a href="#small-fluid" class="nav-link " data-smooth-scroll>Small fluid</a>
                            </li>
                            <li class="nav-item">
                                <a href="#carousel" class="nav-link " data-smooth-scroll>Carousel</a>
                            </li>
                            <li class="nav-item">
                                <a href="#colored" class="nav-link " data-smooth-scroll>Colored</a>
                            </li>
                            <li class="nav-item">
                                <a href="#border" class="nav-link " data-smooth-scroll>Border</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End of content -->
            </div>
        </div>
    </section>
    @@include('./_scripts.html', {
        "path": "../.."
    })
</body>

</html>